

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>SyntheticEvent - React</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:title" content="SyntheticEvent - React">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://facebook.github.io/react/docs/events.html">
  <meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
  <meta property="og:description" content="A JavaScript library for building user interfaces">
  <meta property="fb:app_id" content="623268441017527">

  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
  <link rel="stylesheet" href="/css/syntax.css">
  <link rel="stylesheet" href="/css/codemirror.css">
  <link rel="stylesheet" href="/css/react.css">

  <script src="//use.typekit.net/vqa1hcx.js"></script>
  <script>try{Typekit.load();}catch(e){}</script>

  <!--[if lte IE 8]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/es5-shim.min.js"></script>
  <script src="/js/es5-sham.min.js"></script>
  <![endif]-->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
  <script src="/js/codemirror.js"></script>
  <script src="/js/javascript.js"></script>
  <script src="/js/xml.js"></script>
  <script src="/js/jsx.js"></script>
  <script src="/js/react.js"></script>
  <script src="/js/react-dom.js"></script>
  <script src="/js/babel.min.js"></script>
  <script src="/js/live_editor.js"></script>
</head>
<body>

  <div class="container">

    <div class="nav-main">
  <div class="wrap">
    <a class="nav-home" href="/">
      <img class="nav-logo" src="/img/logo.svg" width="36" height="36">
      React
    </a>
    <div class="nav-lists">
      <ul class="nav-site nav-site-internal">
        <li><a href="/docs/hello-world.html" class="active">Docs</a></li>
        <li><a href="/tutorial/tutorial.html">Tutorial</a></li>
        <li><a href="/community/support.html">Community</a></li>
        <li><a href="/blog/">Blog</a></li>
        <li class="nav-site-search">
          <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
        </li>
      </ul>
      <ul class="nav-site nav-site-external">
        <li><a href="https://github.com/facebook/react">GitHub</a></li>
        <li><a href="https://github.com/facebook/react/releases">v16.0.0-alpha.3</a></li>
      </ul>
    </div>
  </div>
</div>


    <section class="content wrap documentationContent">
  <div class="inner-content">
    <a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/reference-events.md" target="_blank">Edit on GitHub</a>
    <h1>
      SyntheticEvent
    </h1>
    <div class="subHeader"></div>

    <p>This reference guide documents the <code>SyntheticEvent</code> wrapper that forms part of React&#39;s Event System. See the <a href="/docs/handling-events.html">Handling Events</a> guide to learn more.</p>

<h2>Overview</h2>

<p>Your event handlers will be passed instances of <code>SyntheticEvent</code>, a cross-browser wrapper around the browser&#39;s native event. It has the same interface as the browser&#39;s native event, including <code>stopPropagation()</code> and <code>preventDefault()</code>, except the events work identically across all browsers.</p>

<p>If you find that you need the underlying browser event for some reason, simply use the <code>nativeEvent</code> attribute to get it. Every <code>SyntheticEvent</code> object has the following attributes:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">bubbles</span>
<span class="kr">boolean</span> <span class="nx">cancelable</span>
<span class="nx">DOMEventTarget</span> <span class="nx">currentTarget</span>
<span class="kr">boolean</span> <span class="nx">defaultPrevented</span>
<span class="nx">number</span> <span class="nx">eventPhase</span>
<span class="kr">boolean</span> <span class="nx">isTrusted</span>
<span class="nx">DOMEvent</span> <span class="nx">nativeEvent</span>
<span class="k">void</span> <span class="nx">preventDefault</span><span class="p">()</span>
<span class="kr">boolean</span> <span class="nx">isDefaultPrevented</span><span class="p">()</span>
<span class="k">void</span> <span class="nx">stopPropagation</span><span class="p">()</span>
<span class="kr">boolean</span> <span class="nx">isPropagationStopped</span><span class="p">()</span>
<span class="nx">DOMEventTarget</span> <span class="nx">target</span>
<span class="nx">number</span> <span class="nx">timeStamp</span>
<span class="nx">string</span> <span class="nx">type</span>
</code></pre></div>
<blockquote>
<p>Note:</p>

<p>As of v0.14, returning <code>false</code> from an event handler will no longer stop event propagation. Instead, <code>e.stopPropagation()</code> or <code>e.preventDefault()</code> should be triggered manually, as appropriate.</p>
</blockquote>

<h3>Event Pooling</h3>

<p>The <code>SyntheticEvent</code> is pooled. This means that the <code>SyntheticEvent</code> object will be reused and all properties will be nullified after the event callback has been invoked.
This is for performance reasons.
As such, you cannot access the event in an asynchronous way.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">onClick</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">event</span><span class="p">);</span> <span class="c1">// =&gt; nullified object.</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">type</span><span class="p">);</span> <span class="c1">// =&gt; &quot;click&quot;</span>
  <span class="kr">const</span> <span class="nx">eventType</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">type</span><span class="p">;</span> <span class="c1">// =&gt; &quot;click&quot;</span>

  <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">type</span><span class="p">);</span> <span class="c1">// =&gt; null</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">eventType</span><span class="p">);</span> <span class="c1">// =&gt; &quot;click&quot;</span>
  <span class="p">},</span> <span class="mi">0</span><span class="p">);</span>

  <span class="c1">// Won&#39;t work. this.state.clickEvent will only contain null values.</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">clickEvent</span><span class="o">:</span> <span class="nx">event</span><span class="p">});</span>

  <span class="c1">// You can still export event properties.</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">eventType</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">type</span><span class="p">});</span>
<span class="p">}</span>
</code></pre></div>
<blockquote>
<p>Note:</p>

<p>If you want to access the event properties in an asynchronous way, you should call <code>event.persist()</code> on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.</p>
</blockquote>

<h2>Supported Events</h2>

<p>React normalizes events so that they have consistent properties across different browsers.</p>

<p>The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append <code>Capture</code> to the event name; for example, instead of using <code>onClick</code>, you would use <code>onClickCapture</code> to handle the click event in the capture phase.</p>

<ul>
<li><a href="#clipboard-events">Clipboard Events</a></li>
<li><a href="#composition-events">Composition Events</a></li>
<li><a href="#keyboard-events">Keyboard Events</a></li>
<li><a href="#focus-events">Focus Events</a></li>
<li><a href="#form-events">Form Events</a></li>
<li><a href="#mouse-events">Mouse Events</a></li>
<li><a href="#selection-events">Selection Events</a></li>
<li><a href="#touch-events">Touch Events</a></li>
<li><a href="#ui-events">UI Events</a></li>
<li><a href="#wheel-events">Wheel Events</a></li>
<li><a href="#media-events">Media Events</a></li>
<li><a href="#image-events">Image Events</a></li>
<li><a href="#animation-events">Animation Events</a></li>
<li><a href="#transition-events">Transition Events</a></li>
<li><a href="#other-events">Other Events</a></li>
</ul>

<hr>

<h2>Reference</h2>

<h3>Clipboard Events</h3>

<p>Event names:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">onCopy onCut onPaste
</code></pre></div>
<p>Properties:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">DOMDataTransfer</span> <span class="nx">clipboardData</span>
</code></pre></div>
<hr>

<h3>Composition Events</h3>

<p>Event names:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">onCompositionEnd onCompositionStart onCompositionUpdate
</code></pre></div>
<p>Properties:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">string</span> <span class="nx">data</span>
</code></pre></div>
<hr>

<h3>Keyboard Events</h3>

<p>Event names:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">onKeyDown onKeyPress onKeyUp
</code></pre></div>
<p>Properties:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">altKey</span>
<span class="nx">number</span> <span class="nx">charCode</span>
<span class="kr">boolean</span> <span class="nx">ctrlKey</span>
<span class="kr">boolean</span> <span class="nx">getModifierState</span><span class="p">(</span><span class="nx">key</span><span class="p">)</span>
<span class="nx">string</span> <span class="nx">key</span>
<span class="nx">number</span> <span class="nx">keyCode</span>
<span class="nx">string</span> <span class="nx">locale</span>
<span class="nx">number</span> <span class="nx">location</span>
<span class="kr">boolean</span> <span class="nx">metaKey</span>
<span class="kr">boolean</span> <span class="nx">repeat</span>
<span class="kr">boolean</span> <span class="nx">shiftKey</span>
<span class="nx">number</span> <span class="nx">which</span>
</code></pre></div>
<hr>

<h3>Focus Events</h3>

<p>Event names:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">onFocus onBlur
</code></pre></div>
<p>These focus events work on all elements in the React DOM, not just form elements.</p>

<p>Properties:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">DOMEventTarget</span> <span class="nx">relatedTarget</span>
</code></pre></div>
<hr>

<h3>Form Events</h3>

<p>Event names:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">onChange onInput onSubmit
</code></pre></div>
<p>For more information about the onChange event, see <a href="/docs/forms.html">Forms</a>.</p>

<hr>

<h3>Mouse Events</h3>

<p>Event names:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp
</code></pre></div>
<p>The <code>onMouseEnter</code> and <code>onMouseLeave</code> events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.</p>

<p>Properties:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">altKey</span>
<span class="nx">number</span> <span class="nx">button</span>
<span class="nx">number</span> <span class="nx">buttons</span>
<span class="nx">number</span> <span class="nx">clientX</span>
<span class="nx">number</span> <span class="nx">clientY</span>
<span class="kr">boolean</span> <span class="nx">ctrlKey</span>
<span class="kr">boolean</span> <span class="nx">getModifierState</span><span class="p">(</span><span class="nx">key</span><span class="p">)</span>
<span class="kr">boolean</span> <span class="nx">metaKey</span>
<span class="nx">number</span> <span class="nx">pageX</span>
<span class="nx">number</span> <span class="nx">pageY</span>
<span class="nx">DOMEventTarget</span> <span class="nx">relatedTarget</span>
<span class="nx">number</span> <span class="nx">screenX</span>
<span class="nx">number</span> <span class="nx">screenY</span>
<span class="kr">boolean</span> <span class="nx">shiftKey</span>
</code></pre></div>
<hr>

<h3>Selection Events</h3>

<p>Event names:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">onSelect
</code></pre></div>
<hr>

<h3>Touch Events</h3>

<p>Event names:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">onTouchCancel onTouchEnd onTouchMove onTouchStart
</code></pre></div>
<p>Properties:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">altKey</span>
<span class="nx">DOMTouchList</span> <span class="nx">changedTouches</span>
<span class="kr">boolean</span> <span class="nx">ctrlKey</span>
<span class="kr">boolean</span> <span class="nx">getModifierState</span><span class="p">(</span><span class="nx">key</span><span class="p">)</span>
<span class="kr">boolean</span> <span class="nx">metaKey</span>
<span class="kr">boolean</span> <span class="nx">shiftKey</span>
<span class="nx">DOMTouchList</span> <span class="nx">targetTouches</span>
<span class="nx">DOMTouchList</span> <span class="nx">touches</span>
</code></pre></div>
<hr>

<h3>UI Events</h3>

<p>Event names:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">onScroll
</code></pre></div>
<p>Properties:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">number</span> <span class="nx">detail</span>
<span class="nx">DOMAbstractView</span> <span class="nx">view</span>
</code></pre></div>
<hr>

<h3>Wheel Events</h3>

<p>Event names:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">onWheel
</code></pre></div>
<p>Properties:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">number</span> <span class="nx">deltaMode</span>
<span class="nx">number</span> <span class="nx">deltaX</span>
<span class="nx">number</span> <span class="nx">deltaY</span>
<span class="nx">number</span> <span class="nx">deltaZ</span>
</code></pre></div>
<hr>

<h3>Media Events</h3>

<p>Event names:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
onTimeUpdate onVolumeChange onWaiting
</code></pre></div>
<hr>

<h3>Image Events</h3>

<p>Event names:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">onLoad onError
</code></pre></div>
<hr>

<h3>Animation Events</h3>

<p>Event names:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">onAnimationStart onAnimationEnd onAnimationIteration
</code></pre></div>
<p>Properties:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">string</span> <span class="nx">animationName</span>
<span class="nx">string</span> <span class="nx">pseudoElement</span>
<span class="kr">float</span> <span class="nx">elapsedTime</span>
</code></pre></div>
<hr>

<h3>Transition Events</h3>

<p>Event names:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">onTransitionEnd
</code></pre></div>
<p>Properties:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">string</span> <span class="nx">propertyName</span>
<span class="nx">string</span> <span class="nx">pseudoElement</span>
<span class="kr">float</span> <span class="nx">elapsedTime</span>
</code></pre></div>
<hr>

<h3>Other Events</h3>

<p>Event names:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">onToggle
</code></pre></div>

    <div class="docs-prevnext">
      
      
    </div>
  </div>

  <div class="nav-docs">
  <!-- Docs Nav -->
  
    <div class="nav-docs-section">
      <h3>Quick Start</h3>
      <ul>
        
          <li>
            <a href="/docs/installation.html">Installation</a>
            
          </li>
        
          <li>
            <a href="/docs/hello-world.html">Hello World</a>
            
          </li>
        
          <li>
            <a href="/docs/introducing-jsx.html">Introducing JSX</a>
            
          </li>
        
          <li>
            <a href="/docs/rendering-elements.html">Rendering Elements</a>
            
          </li>
        
          <li>
            <a href="/docs/components-and-props.html">Components and Props</a>
            
          </li>
        
          <li>
            <a href="/docs/state-and-lifecycle.html">State and Lifecycle</a>
            
          </li>
        
          <li>
            <a href="/docs/handling-events.html">Handling Events</a>
            
          </li>
        
          <li>
            <a href="/docs/conditional-rendering.html">Conditional Rendering</a>
            
          </li>
        
          <li>
            <a href="/docs/lists-and-keys.html">Lists and Keys</a>
            
          </li>
        
          <li>
            <a href="/docs/forms.html">Forms</a>
            
          </li>
        
          <li>
            <a href="/docs/lifting-state-up.html">Lifting State Up</a>
            
          </li>
        
          <li>
            <a href="/docs/composition-vs-inheritance.html">Composition vs Inheritance</a>
            
          </li>
        
          <li>
            <a href="/docs/thinking-in-react.html">Thinking In React</a>
            
          </li>
        
      </ul>
    </div>
  
    <div class="nav-docs-section">
      <h3>Advanced Guides</h3>
      <ul>
        
          <li>
            <a href="/docs/jsx-in-depth.html">JSX In Depth</a>
            
          </li>
        
          <li>
            <a href="/docs/typechecking-with-proptypes.html">Typechecking With PropTypes</a>
            
          </li>
        
          <li>
            <a href="/docs/refs-and-the-dom.html">Refs and the DOM</a>
            
          </li>
        
          <li>
            <a href="/docs/uncontrolled-components.html">Uncontrolled Components</a>
            
          </li>
        
          <li>
            <a href="/docs/optimizing-performance.html">Optimizing Performance</a>
            
          </li>
        
          <li>
            <a href="/docs/react-without-es6.html">React Without ES6</a>
            
          </li>
        
          <li>
            <a href="/docs/react-without-jsx.html">React Without JSX</a>
            
          </li>
        
          <li>
            <a href="/docs/reconciliation.html">Reconciliation</a>
            
          </li>
        
          <li>
            <a href="/docs/context.html">Context</a>
            
          </li>
        
          <li>
            <a href="/docs/web-components.html">Web Components</a>
            
          </li>
        
          <li>
            <a href="/docs/higher-order-components.html">Higher-Order Components</a>
            
          </li>
        
      </ul>
    </div>
  
    <div class="nav-docs-section">
      <h3>Reference</h3>
      <ul>
        
          <li>
            <a href="/docs/react-api.html">React</a>
            
              <ul>
                
                  <li>
                    <a href="/docs/react-component.html">React.Component</a>
                  </li>
                
              </ul>
            
          </li>
        
          <li>
            <a href="/docs/react-dom.html">ReactDOM</a>
            
          </li>
        
          <li>
            <a href="/docs/react-dom-server.html">ReactDOMServer</a>
            
          </li>
        
          <li>
            <a href="/docs/dom-elements.html">DOM Elements</a>
            
          </li>
        
          <li>
            <a href="/docs/events.html" class="active">SyntheticEvent</a>
            
          </li>
        
          <li>
            <a href="/docs/addons.html">Add-Ons</a>
            
              <ul>
                
                  <li>
                    <a href="/docs/perf.html">Performance Tools</a>
                  </li>
                
                  <li>
                    <a href="/docs/test-utils.html">Test Utilities</a>
                  </li>
                
                  <li>
                    <a href="/docs/animation.html">Animation</a>
                  </li>
                
                  <li>
                    <a href="/docs/create-fragment.html">Keyed Fragments</a>
                  </li>
                
                  <li>
                    <a href="/docs/update.html">Immutability Helpers</a>
                  </li>
                
                  <li>
                    <a href="/docs/pure-render-mixin.html">PureRenderMixin</a>
                  </li>
                
                  <li>
                    <a href="/docs/shallow-compare.html">Shallow Compare</a>
                  </li>
                
                  <li>
                    <a href="/docs/two-way-binding-helpers.html">Two-way Binding Helpers</a>
                  </li>
                
              </ul>
            
          </li>
        
      </ul>
    </div>
  

  <!-- Contributing Nav -->
  
    <div class="nav-docs-section">
      <h3>Contributing</h3>
      <ul>
        
          <li>
            <a href="/contributing/how-to-contribute.html">How to Contribute</a>
          </li>
        
          <li>
            <a href="/contributing/codebase-overview.html">Codebase Overview</a>
          </li>
        
          <li>
            <a href="/contributing/implementation-notes.html">Implementation Notes</a>
          </li>
        
          <li>
            <a href="/contributing/design-principles.html">Design Principles</a>
          </li>
        
      </ul>
    </div>
  

</div>

</section>


    <footer class="nav-footer">
  <section class="sitemap">
    <a href="/" class="nav-home">
    </a>
    <div>
      <h5><a href="/docs/">Docs</a></h5>
      <a href="/docs/hello-world.html">Quick Start</a>
      <a href="/docs/thinking-in-react.html">Thinking in React</a>
      <a href="/tutorial/tutorial.html">Tutorial</a>
      <a href="/docs/jsx-in-depth.html">Advanced Guides</a>
    </div>
    <div>
      <h5><a href="/community/support.html">Community</a></h5>
      <a href="http://stackoverflow.com/questions/tagged/reactjs" target="_blank">Stack Overflow</a>
      <a href="https://discuss.reactjs.org/" target="_blank">Discussion Forum</a>
      <a href="https://discord.gg/0ZcbPKXt5bZjGY5n" target="_blank">Reactiflux Chat</a>
      <a href="https://www.facebook.com/react" target="_blank">Facebook</a>
      <a href="https://twitter.com/reactjs" target="_blank">Twitter</a>
    </div>
    <div>
      <h5><a href="/community/support.html">Resources</a></h5>
      <a href="/community/conferences.html">Conferences</a>
      <a href="/community/videos.html">Videos</a>
      <a href="https://github.com/facebook/react/wiki/Examples" target="_blank">Examples</a>
      <a href="https://github.com/facebook/react/wiki/Complementary-Tools" target="_blank">Complementary Tools</a>
    </div>
    <div>
      <h5>More</h5>
      <a href="/blog/">Blog</a>
      <a href="https://github.com/facebook/react" target="_blank">GitHub</a>
      <a href="http://facebook.github.io/react-native/" target="_blank">React Native</a>
      <a href="/acknowledgements.html">Acknowledgements</a>
    </div>
  </section>
  <a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource">
    <img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
  </a>
  <section class="copyright">
    Copyright © 2017 Facebook Inc.
  </section>
</footer>

  </div>

  <div id="fb-root"></div>
  <script src="/js/anchor-links.js"></script>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-41298772-1', 'facebook.github.io');
    ga('send', 'pageview');

    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=623268441017527";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    docsearch({
      apiKey: '36221914cce388c46d0420343e0bb32e',
      indexName: 'react',
      inputSelector: '#algolia-doc-search'
    });
  </script>
</body>
</html>
